<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点列表和集合</title>
</head>
<body>
    <div id="app"></div>
    <div name="hd"></div>

    <script>
        const nodeList = document.querySelectorAll('div');
        const collection = document.getElementsByTagName('div');
        console.log(nodeList);
        console.log(collection);

        // 列表和集合都可以用for进行遍历
        // for(let i = 0; i < collection.length; i++){
        //     // console.log(collection[i]);
        //     console.log(collection.item(i));
        // }

        // for(let i = 0; i < nodeList.length; i++){
        //     console.log(nodeList[i]);
        // }

        // 如果元素有name或id，可以使用集合中通过name的方式获取,列表不可以
        console.log(collection.namedItem('app'));
        console.log(collection.namedItem('hd'));

        // 集合还可以通过数组的方式获取
        console.log(collection.app);
        console.log(collection['hd']);
    </script>
</body>
</html>